/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  Input,
  Select,
  Tooltip,
  Popconfirm,
  Modal,
  InputNumber,
  Table,
  DatePicker,
  Spin,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DictCode from '../../components/DictCode';
import Area from '../../components/Area';
import styles from './style.less';

const { MonthPicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;

@connect(({ login, waresave, loading }) => ({
  login,
  waresave,
  subStartLoading: loading.effects['waresave/fetchSaveStart'],
  submitting: loading.effects['waresave/fetchSave'],
  loading: loading.effects['waresave/fetchCorpList'],
}))
@Form.create()
class SocialWareAdd extends PureComponent {
  state = {
    visible: false,
  };

  componentDidMount() {
    const {
      login: { systemList, baseUser },
      dispatch,
      location,
    } = this.props;
    const { userType } = baseUser;
    const { sysCode } = systemList.filter(item => item.isSelected)[0];
    const { insAccoId, accoStatus } = location.query;

    dispatch({
      type: 'waresave/updateModelData',
      payload: { insAccoId, userType, sysCode, accoStatus },
    });
    // 获取企业信息
    dispatch({
      type: 'waresave/fetchCorpList',
      payload: {},
    })
      .then(res => {
        const corpId = Number(userType) === 1 ? undefined : res[0].corpId;
        this.getRespList(corpId);
      })
      .then(() => {
        // 查询负责人列表
        if (insAccoId) {
          this.detail(insAccoId);
        }
      });
    // 供应商系统默认五险合一，默认填写工伤比例
    if (Number(sysCode) === 2) {
      dispatch({
        type: 'waresave/updateModelData',
        payload: { insUnifyFlag: 1 },
      });
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const parmars = {
      userType: '',
      comList: [],
      respDataList: [],
      supplyList: [],
      insUnifyFlag: 3,
      unitId: undefined,
      unitName: undefined,
      insPkgListArr: [],
      respListArr: [],
      index: 0,
      remark: undefined,
      custBankName: undefined,
      custBankId: undefined,
      accoName: undefined,
      areaId: undefined,
      insKindsList: undefined,
      insBur: undefined,
      insKindsArr: undefined,
      uniCreditCode: undefined,
      insAccoId: undefined,
      insInjRatio: undefined,
      supplyListFlag: true,
      insLsPkgIdsList: undefined,
      entpType: undefined,
    };
    dispatch({
      type: 'waresave/updateModelData',
      payload: parmars,
    });
  }

  detail = insAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/fetchDetailInfor',
      payload: { insAccoId },
    });
  };

  // 查询负责人列表
  getRespList = corpId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/fetchUserId',
      payload: {
        corpId,
      },
    });
  };

  // 开户地区
  getData = areaId => {
    const { form, dispatch } = this.props;
    form.resetFields(['insKindsList', 'insLsPkgIdsList']);
    const parmars = {
      insPkgListArr: [],
      insKindsArr: [],
    };

    dispatch({
      type: 'waresave/updateModelData',
      payload: parmars,
    });
    // 获取社保组合
    this.getSocialList(areaId);
    // 是否五险合一
    this.getoperParams(areaId);
  };

  // 运行政策名称（社保组）
  getSocialList = areaId => {
    const { dispatch } = this.props;
    // 获取企业信息
    dispatch({
      type: 'waresave/fetchInsLsPkg',
      payload: { areaId },
    });
  };

  getoperParams = areaId => {
    const { sysCode } = this.state;
    if (Number(sysCode) === 2) {
      return;
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/fetchPlcyParam',
      payload: { areaId },
    });
  };

  groupChange = checkedList => {
    const { dispatch } = this.props;
    const isRequire = checkedList.indexOf('5') >= 0;
    dispatch({
      type: 'waresave/updateModelData',
      payload: { isRequire },
    });
  };

  socialChange = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/updateModelData',
      payload: { isRequire: e.target.checked },
    });
  };

  // 公司名称
  comInfoChange = value => {
    const { dispatch, waresave } = this.props;
    if (waresave.comList.length) {
      waresave.comList.forEach(item => {
        if (String(item.corpId) === String(value)) {
          dispatch({
            type: 'waresave/updateModelData',
            payload: {
              uniCreditCode: item.uniCreditCode,
              corpId: item.corpId,
              unitName: item.companyName,
            },
          });
          this.getRespList(item.corpId);
        }
      });
    }
  };

  // 提交并启用
  submitEnable = e => {
    e.preventDefault();
    const { form, waresave, dispatch } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const newValues = values;
        newValues.unitName = waresave.unitName;
        newValues.unitId = waresave.corpId;
        dispatch({
          type: 'waresave/fetchSaveStart',
          payload: { ...newValues },
        });
      }
    });
  };

  //  提交
  submitAll = e => {
    e.preventDefault();
    const { form, waresave, dispatch } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const newValues = values;
        newValues.unitName = waresave.unitName;
        newValues.unitId = waresave.corpId;
        const tempInjRatioList = newValues.injRatioList;
        if (tempInjRatioList) {
          const arr = [];
          Object.keys(tempInjRatioList).forEach(item => {
            arr.push({
              ...tempInjRatioList[item],
              beginYm: tempInjRatioList[item].beginYm
                ? tempInjRatioList[item].beginYm.format('YYYYMM')
                : null,
            });
          });
          newValues.injRatioList = arr;
        }

        const newRespList = [];
        if (newValues.respList) {
          // 申报负责人回转，将显示中文的转换回字典值
          newValues.respList.map(items => {
            if (waresave.respDataList.some(pdItem => pdItem.userId === items)) {
              newRespList.push(items);
            } else {
              waresave.respList.map(value => {
                if (value.respName === items) {
                  newRespList.push(value.respId);
                }
              });
            }
          });
        }
        newValues.respList = newRespList;

        const tempValues = JSON.parse(JSON.stringify(newValues));
        if (!waresave.supplyListFlag) {
          if (tempValues.insLsPkgIdsList.length) {
            tempValues.insLsPkgIdsList.forEach((item, i, arr) => {
              waresave.insPkgList.forEach(h => {
                if (h.insLsPkgName === item) {
                  // eslint-disable-next-line no-param-reassign
                  arr[i] = h.insLsPkgId;
                }
              });
            });
          }
        }
        dispatch({
          type: 'waresave/fetchSave',
          payload: { ...tempValues },
        });
      }
    });
  };

  // 表单提交 并 启用
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };

  // 取消
  cancel = () => {
    router.goBack();
  };

  // 新增
  addList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/addList',
      payload: {},
    });
  };

  // 开始年月切换
  dataTimelist = (date, record, index) => {
    const {
      waresave: { injRatioList },
      dispatch,
    } = this.props;
    const newData = injRatioList.map(item => ({ ...item }));
    newData.map((item, idx) => {
      const newItem = item;
      if (Number(index) === idx) {
        newItem.beginYm = moment(date).format('YYYYMM');
      }
      return true;
    });
    dispatch({
      type: 'waresave/updateModelData',
      payload: {
        injRatioList: newData,
      },
    });
  };

  disabledDate = (startValue, limitDate) => {
    const {
      waresave: { injRatioList },
    } = this.props;
    let tempLimitDate = limitDate;
    if (!startValue) {
      return false;
    }
    if (injRatioList.length === 2 && !injRatioList[1].beginYm) {
      return false;
    }
    if (injRatioList.length > 2) {
      tempLimitDate = moment(`${injRatioList[1].beginYm}01`)
        .add(1, 'months')
        .format('YYYYMM');
    }
    return startValue.valueOf() < moment(tempLimitDate).valueOf();
  };

  // dataSlist = (e, record, index) => {
  // const {
  //   dispatch,
  //   waresave: { injRatioList },
  // } = this.props;
  // const newData = injRatioList.map(item => ({ ...item }));
  // newData.forEach((item, idx) => {
  //   const newItem = item;
  //   if (Number(index) === idx) {
  //     newItem.ratioVal = e;
  //   }
  // });
  // dispatch({
  //   type: 'waresave/updateModelData',
  //   payload: {
  //     injRatioList: newData,
  //   },
  // });
  // };

  // 删除行
  remove(key) {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/deleteList',
      payload: { key },
    });
  }

  // 渲染函数
  render() {
    const { form, submitting, waresave, subStartLoading, loading } = this.props;
    const { getFieldDecorator } = form;
    const { visible } = this.state;
    const bDisable = Number(waresave.accoStatus) === 2 || Number(waresave.accoStatus) === 3;
    const comOption =
      waresave.comList.length &&
      waresave.comList.map(value => (
        <Option key={value.corpId} value={value.corpId}>
          {value.companyName}
        </Option>
      ));
    // 缴纳险种备注内容
    const renderAssTip = () => (
      <Tooltip
        placement="right"
        title="五险不合一的地区需根据险种的申报政策来选择险种，如果每个险种的申报政策（包括申报时间和回盘时间）都不同则只能单选并分别创建5个大库，如果其中有两个险种的申报政策是完全相同的，比如医疗和生育，则可以复选，险种组合一旦选中并生效不可以再做修改。"
      >
        <span>缴纳险种</span>
        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
      </Tooltip>
    );

    // 申报负责人备注内容
    const renderRepListTip = () => (
      <Tooltip
        placement="right"
        title="只可以选择具有社保公积金系统权限的人员，只有设置的人员可查看该大库的增减员申报信息。"
      >
        <span>申报负责人</span>
        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
      </Tooltip>
    );

    const insKindsListDom = () => {
      if (Number(waresave.insUnifyFlag) === 3) {
        return <Select placeholder="请在系统管理中进行参数配置" mode="multiple" />;
      }
      if (Number(waresave.insUnifyFlag) === 2) {
        return (
          <DictCode
            dictType="BIZ_INS_TYPE"
            placeholder="请选择缴纳险种"
            mode="multiple"
            onChange={this.groupChange}
            disabled={bDisable}
          />
        );
      }
      if (Number(waresave.insUnifyFlag) === 1) {
        return (
          <Select
            placeholder="请选择缴纳险种"
            mode="multiple"
            onChange={this.groupChange}
            disabled={bDisable}
          >
            <Option key="1">社保</Option>
          </Select>
        );
      }
      return true;
    };

    const columns = [
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: (text, record, index) => (
          <div>
            <FormItem style={{ display: 'none' }}>
              {getFieldDecorator(
                `injRatioList[${record.key || record.suppInsInjRatioId}]['suppInsInjRatioId']`,
                {
                  rules: [
                    {
                      required: false,
                      message: `开始年月不能为空!`,
                    },
                  ],
                  initialValue: record.suppInsInjRatioId,
                }
              )(<span>{record.suppInsInjRatioId}</span>)}
            </FormItem>
            <FormItem style={{ margin: 0 }} className={styles.edittableAcco}>
              {getFieldDecorator(
                `injRatioList[${record.key || record.suppInsInjRatioId}]['beginYm']`,
                {
                  rules: [
                    {
                      required: false,
                      message: `开始年月不能为空!`,
                    },
                  ],
                  initialValue: record.beginYm ? moment(`${record.beginYm}`) : undefined,
                  // initialValue: record.beginYm ? moment('202011') : undefined,
                }
              )(
                <MonthPicker
                  placeholder="请选择"
                  format="YYYY-MM"
                  style={{ width: '100%' }}
                  disabled={index !== 0 || waresave.injRatioList.length === 1}
                  disabledDate={startValue => this.disabledDate(startValue, waresave.rangeDate)}
                  allowClear={false}
                  onChange={date => this.dataTimelist(date, record, index)}
                />
              )}
            </FormItem>
          </div>
        ),
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        key: 'ratioVal',
        width: '15%',
        render: (text, record) => (
          <FormItem style={{ margin: 0 }} className={styles.edittableAcco}>
            {getFieldDecorator(
              `injRatioList[${record.key || record.suppInsInjRatioId}]['ratioVal']`,
              {
                rules: [
                  {
                    required: true,
                    message: `请输入小数点不超过4位企业工伤比例!`,
                    pattern: /^[0-9]{0,7}(\.[0-9]{1,4})?$/,
                  },
                ],
                initialValue: text,
              }
            )(
              <InputNumber
                placeholder="请输入企业工伤比例"
                style={{ width: '100%' }}
                // onChange={e => this.dataSlist(e, record, index)}
              />
            )}
          </FormItem>
        ),
      },
      {
        title: '操作',
        key: 'action',
        width: '15%',
        render: (text, record, index) =>
          index !== 0 || waresave.injRatioList.length === 1 ? null : (
            <span>
              <Popconfirm
                title="是否要删除此行？"
                onConfirm={() => this.remove(record.suppInsInjRatioId || record.key)}
              >
                <a>删除</a>
              </Popconfirm>
            </span>
          ),
      },
    ];
    // 是否展示企业工伤比例
    const bFlag =
      Number(waresave.sysCode) === 2 ||
      Number(waresave.insUnifyFlag) === 1 ||
      (Number(waresave.insUnifyFlag) === 2 && waresave.isRequire);
    // console.log('waresave.injRatioList', waresave.injRatioList);
    return (
      <Spin tip="Loading..." spinning={loading}>
        <Form layout="vertical">
          <PageHeaderWrapper>
            <Card
              title={<span style={{ fontWeight: 'bolder' }}>社保账户信息</span>}
              bordered={false}
            >
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="大库名称">
                    {getFieldDecorator('accoName', {
                      rules: [{ required: true, pattern:/^(?!\.)[^\\/:*?"<>|]{1,255}$/,message: '文件名不能包含下列任何字符  \\  /  :  *   ?  "  <  >  |'}],
                      initialValue: waresave.accoName,
                    })(<Input placeholder="请输入大库名称" maxLength={50} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="公司名称">
                    {getFieldDecorator('unitId', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: waresave.comList.length ? waresave.unitId : waresave.unitName,
                    })(
                      waresave.comList.length ? (
                        <Select
                          placeholder="请选择公司名称"
                          onChange={this.comInfoChange}
                          disabled={Number(waresave.userType) !== 1 || bDisable}
                        >
                          {comOption}
                        </Select>
                      ) : (
                        <Input
                          placeholder="请输入公司名称"
                          disabled={Number(waresave.userType) !== 1 || bDisable}
                        />
                      )
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="统一社会信用代码">
                    {getFieldDecorator('uniCreditCode', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: waresave.uniCreditCode,
                    })(<Input placeholder="请输入社会统一信用代码" disabled />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="开户地区">
                    {getFieldDecorator('areaId', {
                      rules: [{ required: true, message: '请选择开户地区' }],
                      initialValue: waresave.areaId,
                    })(
                      <Area
                        onChange={(value, id) => this.getData(value, id)}
                        allowClear
                        disabled={bDisable}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="所属社保机构">
                    {getFieldDecorator('insBur', {
                      rules: [{ required: true, message: '请输入所属社保机构' }],
                      initialValue: waresave.insBur,
                    })(<Input placeholder="请输入所属社保机构" maxLength={50} />)}
                  </FormItem>
                </Col>
                {/* 不同系统 显示区分 */}
                {Number(waresave.sysCode) === 2 ? (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <FormItem label={renderAssTip()}>
                      {getFieldDecorator('insKindsList', {
                        rules: [{ required: true, message: '请输入' }],
                        initialValue: '1',
                      })(
                        <Select placeholder="请选择缴纳险种" disabled>
                          <Option key="1">社保</Option>
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                ) : (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <FormItem label={renderAssTip()}>
                      {getFieldDecorator('insKindsList', {
                        rules: [
                          {
                            required: true,
                            message:
                              Number(waresave.insUnifyFlag) === 3
                                ? '请在系统管理中进行参数配置'
                                : '请选择',
                          },
                        ],
                        initialValue: waresave.insKindsArr,
                      })(insKindsListDom())}
                    </FormItem>
                  </Col>
                )}
              </Row>
              {!bFlag || waresave.insAccoId ? (
                <div>
                  <Row gutter={64}>
                    <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                      <FormItem
                        label={
                          <span>
                            社保组合<span style={{ color: '#999999' }}>(可多选)</span>
                          </span>
                        }
                      >
                        {getFieldDecorator('insLsPkgIdsList', {
                          rules: [{ required: true, message: '请选择' }],
                          initialValue: waresave.insLsPkgIdsList,
                        })(
                          <Select
                            placeholder="请选择本大库支持的社保组合"
                            mode="multiple"
                            disabled={bDisable}
                          >
                            {waresave.supplyList.length &&
                              waresave.supplyList.map(value => (
                                <Option key={value.insLsPkgId} value={value.insLsPkgId}>
                                  {value.insLsPkgName}
                                </Option>
                              ))}
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                      <FormItem label="开户企业类型">
                        {getFieldDecorator('entpType', {
                          rules: [{ required: true, message: '请选择开户企业类型' }],
                          initialValue: waresave.entpType && waresave.entpType.toString(),
                        })(<DictCode dictType="ENTP_TYPE" placeholder="请选择开户企业类型" />)}
                      </FormItem>
                    </Col>
                    <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                      <FormItem label="开户行">
                        {getFieldDecorator('custBankName', {
                          rules: [
                            { required: false, message: '请输入不超过100个字的开户行', max: 50 },
                          ],
                          initialValue: waresave.custBankName,
                        })(<Input placeholder="请输入开户行" maxLength={50} />)}
                      </FormItem>
                    </Col>
                    <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                      <FormItem label="银行账号">
                        {getFieldDecorator('custBankId', {
                          rules: [
                            {
                              required: false,
                              message: '最大长度不超过25位数字',
                              pattern: /^\d{1,25}$/,
                            },
                          ],
                          initialValue: waresave.custBankId,
                        })(<Input placeholder="请输入银行账户信息" maxLength={25} />)}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={64}>
                    {Number(waresave.sysCode) !== 2 && (
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem label={renderRepListTip()}>
                          {getFieldDecorator('respList', {
                            rules: [{ required: true, message: '请选择申报负责人' }],
                            initialValue: waresave.respListArr,
                          })(
                            <Select
                              mode="multiple"
                              style={{ width: '100%' }}
                              placeholder="请选择"
                              showSearch
                              optionFilterProp="children"
                            >
                              {waresave.respDataList.map(value => (
                                <Option key={value.userId} value={value.userId}>
                                  {value.userName}
                                </Option>
                              ))}
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                    )}
                    <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                      <FormItem label="备注">
                        {getFieldDecorator('remark', {
                          rules: [{ required: false, message: '请输入不超过200个字的备注' }],
                          initialValue: waresave.remark,
                        })(<TextArea placeholder="请输入备注" maxLength={100} />)}
                      </FormItem>
                    </Col>
                  </Row>
                </div>
              ) : (
                !waresave.insAccoId && (
                  <div>
                    <Row gutter={64}>
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <Row>
                          <Col xl={{ span: 22 }} lg={{ span: 22 }} md={{ span: 22 }} sm={20}>
                            <FormItem label="企业工伤比例(%)">
                              {getFieldDecorator('insInjRatio', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入',
                                    pattern: /^[0-9]{0,7}(\.[0-9]{1,4})?$/,
                                  },
                                ],
                                initialValue: waresave.insInjRatio,
                              })(
                                <InputNumber
                                  placeholder="请输入小数点不超过4位企业工伤比例"
                                  style={{ width: '100%' }}
                                />
                              )}
                            </FormItem>
                          </Col>
                          <Col xl={{ span: 1 }} lg={{ span: 1 }} md={{ span: 1 }} sm={2}>
                            <FormItem>
                              <span style={{ marginTop: 34, display: 'block', marginLeft: 20 }}>
                                %
                              </span>
                            </FormItem>
                          </Col>
                        </Row>
                      </Col>
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem
                          label={
                            <span>
                              社保组合<span style={{ color: '#999999' }}>(可多选)</span>
                            </span>
                          }
                        >
                          {getFieldDecorator('insLsPkgIdsList', {
                            rules: [{ required: true, message: '请选择' }],
                          })(
                            <Select placeholder="请选择本大库支持的社保组合" mode="multiple">
                              {waresave.supplyList.length &&
                                waresave.supplyList.map(value => (
                                  <Option key={value.insLsPkgId} value={value.insLsPkgId}>
                                    {value.insLsPkgName}
                                  </Option>
                                ))}
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem label="开户企业类型">
                          {getFieldDecorator('entpType', {
                            rules: [{ required: true, message: '请选择开户企业类型' }],
                            initialValue: waresave.entpType && waresave.entpType.toString(),
                          })(<DictCode dictType="ENTP_TYPE" placeholder="请选择开户企业类型" />)}
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={64}>
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem label="开户行">
                          {getFieldDecorator('custBankName', {
                            rules: [
                              { required: false, message: '请输入不超过100个字的开户行', max: 50 },
                            ],
                          })(<Input placeholder="请输入开户行" maxLength={50} />)}
                        </FormItem>
                      </Col>
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem label="银行账号">
                          {getFieldDecorator('custBankId', {
                            rules: [
                              {
                                required: false,
                                message: '最大长度不超过25位数字',
                                pattern: /^\d{1,25}$/,
                              },
                            ],
                          })(<Input placeholder="请输入" maxLength={25} />)}
                        </FormItem>
                      </Col>

                      {Number(waresave.sysCode) !== 2 && (
                        <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                          <FormItem label={renderRepListTip()}>
                            {getFieldDecorator('respList', {
                              rules: [{ required: true, message: '请选择申报负责人' }],
                            })(
                              <Select
                                mode="multiple"
                                style={{ width: '100%' }}
                                placeholder="请选择"
                              >
                                {waresave.respDataList.map(value => (
                                  <Option key={value.userId} value={value.userId}>
                                    {value.userName}
                                  </Option>
                                ))}
                              </Select>
                            )}
                          </FormItem>
                        </Col>
                      )}
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <FormItem label="备注">
                          {getFieldDecorator('remark', {
                            rules: [{ required: false, message: '请输入不超过200个字的备注' }],
                          })(<TextArea placeholder="请输入备注" maxLength={100} />)}
                        </FormItem>
                      </Col>
                    </Row>
                  </div>
                )
              )}

              {waresave.insAccoId && bFlag ? (
                <Card
                  title={<span style={{ fontWeight: 'bolder' }}>企业工伤比例信息</span>}
                  bordered={false}
                  style={{ marginBottom: 24 }}
                >
                  <Row gutter={64}>
                    <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
                      <Button
                        style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
                        type="dashed"
                        onClick={this.addList}
                        icon={<PlusOutlined />}
                      >
                        添加新时段
                      </Button>

                      <Table
                        columns={columns}
                        dataSource={waresave.injRatioList}
                        pagination={false} // 分页
                        rowKey={record => record.suppInsInjRatioId || record.key}
                        rowClassName="editableRow"
                      />
                    </Col>
                  </Row>
                </Card>
              ) : null}

              <Modal
                title="提醒"
                visible={visible}
                onOk={this.submitEnable}
                onCancel={this.hideModal}
                okText="继续"
                cancelText="取消"
                confirmLoading={subStartLoading}
              >
                <p>
                  大库启用后，【公司名称】、【社会统一信用代码】、【开户地区】、【缴纳险种】、【社保组合】将不可修改，请确认是否继续？
                </p>
              </Modal>
            </Card>

            <FooterToolbar>
              <Button onClick={this.cancel} style={{ marginRight: 8 }}>
                {' 取消 '}
              </Button>
              <Button type="primary" onClick={this.submitAll} loading={submitting}>
                提交
              </Button>
              {waresave.insAccoId ? null : (
                <Button
                  type="primary"
                  onClick={this.showModal}
                  style={{ marginLeft: 8 }}
                  disabled={submitting}
                >
                  提交并启用
                </Button>
              )}
            </FooterToolbar>
          </PageHeaderWrapper>
        </Form>
      </Spin>
    );
  }
}

export default SocialWareAdd;
